<template>
  <table class="table table-response table-sm table-striped table-hover">
    <thead>
      <tr>
        <th>订单号</th>
        <th>产品名称</th>
        <th>客户</th>
        <th>乘机人</th>
        <th colspan="5" class="bg-info text-center text-white">行程</th>
        <th>付款方式</th>
        <th>预订员</th>
        <th>提交时间</th>
        <th class="text-end">订单金额</th>
        <th class="text-end">成本</th>
        <th class="text-end">利润</th>
        <th>状态</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <template v-for="info in dataList">
        <tr
          :key="info.id"
        >
          <td>{{ info.orderNo }}</td>
          <td>{{ info.productName }}</td>
          <td>
            {{ showCustomerName(info) }}
          </td>
          <td>
            <template v-for="(psg, index) in info.passengers">
              <span :key="psg.id">
                {{ psg.name }}
                <span class="text-danger"
                  ><strong>{{ psg.seatNo }}</strong></span
                >
                {{ psg.mobile }}
                <template v-if="index < info.passengers.length - 1"
                  ><br
                /></template>
              </span>
            </template>
          </td>
          <td>
            <template v-for="(flt, index) in info.flights">
              <span :key="flt.id">
                <small class="text-success">{{ flt.dport }}</small>
                {{ flt.dportName }}
                <template v-if="index < info.flights.length - 1"
                  ><br
                /></template>
              </span>
            </template>
          </td>
          <td>
            <template v-for="(flt, index) in info.flights">
              <span :key="flt.id">
                <small class="text-success">{{ flt.aport }}</small>
                {{ flt.aportName }}
                <template v-if="index < info.flights.length - 1"
                  ><br
                /></template>
              </span>
            </template>
          </td>
          <td>
            <template v-for="(flt, index) in info.flights">
              <span :key="flt.id">
                {{ flt.ddate }}
                <template v-if="index < info.flights.length - 1"
                  ><br
                /></template>
              </span>
            </template>
          </td>
          <td>
            <template v-for="(flt, index) in info.flights">
              <span :key="flt.id">
                {{ flt.flightNo }}
                <template v-if="index < info.flights.length - 1"
                  ><br
                /></template>
              </span>
            </template>
          </td>
          <td>
            <template v-for="(flt, index) in info.flights">
              <span :key="flt.id">
                {{ flt.subclass }}
                <template v-if="index < info.flights.length - 1"
                  ><br
                /></template>
              </span>
            </template>
          </td>
          <td>
            {{ getPayTypeDesc(info.payType) }}
            <span
              class="small text-danger"
              v-if="info.payType !== 8 && info.payStatus === 0"
              >(未付)</span
            >
            <span class="small text-primary" v-if="info.payStatus === 2"
              >已销</span
            >
          </td>
          <td>{{ info.operator }}</td>
          <td>
            <template v-if="info.createTime !== null">
              {{ info.createTime.substring(5) }}
            </template>
          </td>
          <td class="text-end">{{ info.totalAmount }}</td>
          <td class="text-end">{{ info.totalCost }}</td>
          <td class="text-end">{{ info.profit }}</td>
          <td>{{ getStatusDesc(info.status) }}</td>

          <td>
            <template v-if="info.orderType === 0">
              <router-link :to="`/vas/order/` + info.id">详细</router-link>
            </template>
            <template v-else>
              <router-link :to="`/vaas/order/` + info.id">详细</router-link>
            </template>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script>
import { showPayType } from "@/common/common.js";
import { showVasOrderStatus } from "@/api/vas.js";
import { showCustomerName } from "@/common/common.js";

export default {
  props: {
    dataList: {
      type: Array,
    },
  },
  methods: {
    getStatusDesc: function (status) {
      return showVasOrderStatus(status);
    },
    getPayTypeDesc: function (payType) {
      return showPayType(payType);
    },
    showCustomerName: function (info) {
      return showCustomerName(info, 0);
    },
  },
};
</script>